<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<style>
  div{
      width: 200px;
      height: 200px;
      background-color: orange;
      color: white;
      font-size: 3em;
  }
</style>

<body>
    <script src="js/jquery-3.4.1.min.js"></script>

    <button>试试</button> 
    <div>hello</div>

    <script>
       /* 链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起 ； */
       /* 例如：点击一次按钮，让div完成4个指定动作
                1. 背景变粉
                2. 字体变绿
                3. 收缩
                4. 拉伸 */
        $("button").click(function(){
            $("div").css("background-color","pink").css("color","green").slideUp(1000).slideDown(1000);
        });
    </script>
</body>
</html>